<template>
  <div>
    <ocean :use="form"></ocean>
    <n-form-item label="上传商品图片">
      <n-upload list-type="image-card" v-model:file-list="fileList" :action="action" :headers="headers"
        @finish="onUploadFinish" @error="onUploadError"></n-upload>
    </n-form-item>
    <n-form-item label="上传商品海报图片">
      <n-upload list-type="image-card" v-model:file-list="posterList" :max="1" :action="posterAction" :headers="headers"
        @finish="onUploadFinish" @error="onUploadError"></n-upload>
    </n-form-item>
  </div>
</template>

<script lang="tsx" setup>
import { useForm } from '@/ocean';
import { GlobalAPI, GoodsAPI } from '@/app/api';
import { reactive, ref } from 'vue';
import { useMessage } from 'naive-ui';
type Goods = {
  carbs: "52.1"
  cateName: ""
  childIds: ""
  cover: ""
  createTime: "2022-08-27 22:18:15"
  dietaryFiber: "3.5"
  disCount: 0.4
  fat: "12.5"
  foodTypes: "7"
  goodsDesc: "测试"
  goodsName: "黄焖鸡米饭"
  goodsOption: "1"
  id: 15
  isCombo: 2
  kcal: "300"
  likeCount: 99
  limitNum: 2
  monthSales: 3000
  originPrice: 50
  praiseRate: 0
  protein: "27.8"
  salt: "1.7"
  sellPrice: 20
  status: 1
  storeName: ""
  totalSales: 9999
  updateTime: "2022-08-27 22:18:15",
  advice: false,
  adviceImg: "",
}

let props = defineProps<{
  goods?: Goods,
}>()

let message = useMessage();

let fileList = ref([]);
let posterList = ref([]);
let { action, headers } = GlobalAPI.uploadFile();
let { action: posterAction } = GlobalAPI.uploadFile();


let form = useForm<Goods>({ cols: "2" });
form.item('商品名', 'goodsName').input();
form.item('商品规格(g)', 'goodsOption').inputNumber();
form.item('商品售价(元)', 'sellPrice').inputNumber();
form.item('商品原价(元)', 'originPrice').inputNumber();
form.item('商品限购(份)', 'limitNum').inputNumber();
form.item('商品月销量(份)', 'monthSales').inputNumber();
form.item('商品总销量(份)', 'totalSales').inputNumber();
form.item('商品好评率', 'praiseRate').inputNumber();
form.item('商品热量(kcal)', 'kcal').inputNumber();
form.item('蛋白质含量(g)', 'protein').inputNumber();
form.item('膳食纤维含量(g)', 'dietaryFiber').inputNumber();
form.item('碳水含量(g)', 'carbs').inputNumber();
form.item('盐量含量(g)', 'salt').inputNumber();
form.item('脂肪含量(g)', 'fat').inputNumber();
form.item('食物多样(种)', 'foodTypes').inputNumber();
form.item('商品描述', 'goodsDesc').input();
form.item('设为推荐', 'advice').switch({ checkedValue: 1, uncheckedValue: 0 });

if (props.goods) {
  form.setModel(props.goods)
  let images = props.goods.cover || []
  fileList.value = images.map((img, i) => {
    return {
      id: i,
      name: '商品图片' + i,
      status: 'finished',
      url: img
    }
  })

  if (props.goods.adviceImg) {
    posterList.value = [{
      id: 'a',
      name: '商品海报图片',
      status: 'finished',
      url: props.goods.adviceImg
    }]
  }
}

const onUploadFinish = ({ file, event }) => {
  message.success('上传成功')
  let res = JSON.parse(event.target.response)
  file.url = res.data;
  GoodsAPI.updateGoods(form.model)
}
const onUploadError = () => {
  message.warning('上传失败')
}

defineExpose({
  submit() {
    form.setModel({
      cover: fileList.value.map(file => file.url) as any,
      adviceImg: posterList.value.map(file => file.url)[0] || '',
    })
    if (props.goods) {
      return GoodsAPI.updateGoods(form.model)
    }
    else {
      return GoodsAPI.addGoods(form.model)
    }
  }
})

</script>